<template>
  <div class="app-container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 总公司的信息 -->
        <TreeItem :data="company" @opt="onOpt" />
      </div>
      <!-- 树形控件 -->
      <!-- data 属性用来制定数据源 -->
      <!-- props 属性用来控制数据的渲染方式 -->
      <!-- default-expand-all 表示默认展开所有子节点 -->
      <el-tree :data="treeData" default-expand-all>
        <!-- 作用域插槽 -->
        <!-- 作用域插槽中的 data，就是当前节点对应的数据对象 -->
        <template v-slot="{ node, data }">
          <TreeItem :data="data" @opt="onOpt">
            <template v-slot:icon>
              <!-- 如果是末节点，要渲染第一个图标 -->
              <!-- 如果被展开了，需要渲染第二个图标 -->
              <!-- 如果被折叠了，需要渲染第三个图标 -->
              <i v-if="node.isLeaf" class="el-icon-user-solid"></i>
              <i v-else-if="node.expanded" class="el-icon-remove"></i>
              <i v-else class="el-icon-circle-plus"></i>
            </template>
          </TreeItem>
        </template>
      </el-tree>
    </el-card>

    <!-- 添加子部门的组件 -->
    <AddDepart :show-dialog.sync="isShowAdd" :pid.sync="pid" @reload="initDepartList" />

    <!-- 修改部门的组件 -->
    <EditDepart :id.sync="id" :show-dialog.sync="isShowEdit" @reload="initDepartList" />
  </div>
</template>

<script>
import { getDepartListAPI, delDepartAPI } from '@/api/depart.js'
import { arr2Tree } from '@/utils'
// 导入子组件
import TreeItem from './components/TreeItem.vue'
import AddDepart from './components/AddDepart.vue'
import EditDepart from './components/EditDepart.vue'

export default {
  name: 'Departments',
  // 注册子组件
  components: {
    TreeItem,
    AddDepart,
    EditDepart
  },
  data() {
    return {
      // 树形组件的数据源
      treeData: [],
      // 总公司的信息对象
      company: { id: '', manager: '负责人', name: '江苏传智播客教育科技股份有限公司' },
      // 是否展示添加的对话框
      isShowAdd: false,
      // 父部门的 id，在添加子部门的时候，需要用到
      pid: '',
      // 是否展示修改的对话框
      isShowEdit: false,
      // 要修改的部门的 id
      id: ''
    }
  },
  created() {
    this.initDepartList()
  },
  methods: {
    // 初始化组织架构的数据
    async initDepartList() {
      const result = await getDepartListAPI()
      // 调用函数，把数组转为树形格式
      const treeData = arr2Tree(result.data.depts, '')
      // 把转换的结果，作为 el-tree 的数据源
      this.treeData = treeData
      console.log(treeData)
    },
    // TreeItem 中自定义事件 opt 的处理函数
    // {type: 'add', departId: '1175310929766055936'}
    // {type: 'edit', departId: '1175310929766055936'}
    // {type: 'del', departId: '1175310929766055936'}
    async onOpt(obj) {
      if (obj.type === 'add') {
        // 添加部门
        // 为父 id 赋值
        this.pid = obj.departId
        // 添加子部门
        this.isShowAdd = true
      }
      if (obj.type === 'edit') {
        // 修改部门
        this.id = obj.departId
        this.isShowEdit = true
      }

      if (obj.type === 'del') {
        // 删除的操作
        // 1. 询问用户是否删除
        // 2. 调用删除的接口
        // 3. 提示成功、刷新列表数据
        const result = await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => err)

        if (result !== 'confirm') return

        // 调用接口
        await delDepartAPI(obj.departId)
        this.$message.success('删除成功！')
        this.initDepartList()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
